.scatter-box {
    position: relative;
    margin: 5px;
    background: #f0f0f0;
    font-family: sans-serif;
    font-size: 13px;
}

.scatter-box text {
    fill: slategray;
    font-size: 12px;
}

.scatter-box .axis text {
    font-size: 10px;
}

.scatter-box .axis path,
.scatter-box .axis line {
    shape-rendering: crispEdges;
    fill: none;
}

.scatter-box .axis path {
    stroke: #333;
}

.scatter-box .grid line {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.scatter-box .grid path {
    stroke-width: 0;
}

rect.bar {
    fill: lightslategray;
}

.scatter-box .legend-label {
    font-weight: 600;
}

.scatter-box .legend-box {
    fill: #fff;
    fill-opacity: 0.5;
    stroke: gray;
    stroke-opacity: 0.5;
}

.scatter-box .chart-title {
    font-size: 1em;
    font-weight: 600;
    fill: #333;
}

.scatter-box .tooltip {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.4;
    padding: 5px;
    border: 1px solid lightgray;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: 0.2s all ease-in;
    font-size: 12px;
}

.scatter-box .tooltip.active {
    opacity: 1;
}

.scatter-box .tooltip b {
    display: inline-block;
    width: 4.5em;
    font-weight: 600;
    text-align: right;
}